<template>
  <div class="thesis-progress-page">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <personal-progress :thesis="currentUserThesis" />
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <global-overview :theses="allTheses" />
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElContainer, ElHeader, ElMain, ElRow, ElCol } from 'element-plus'
import PersonalProgress from '../components/PersonalProgress.vue'
import GlobalOverview from '../components/GlobalOverview.vue'

// 假数据
const currentUserThesis = ref({
  id: 1,
  title: '基于机器学习的自然语言处理研究',
  currentStep: 3,
  totalSteps: 5,
  steps: [
    { id: 1, name: '选题', completed: true },
    { id: 2, name: '文献综述', completed: true },
    { id: 3, name: '方法设计', completed: true },
    { id: 4, name: '实验与结果分析', completed: false },
    { id: 5, name: '论文撰写', completed: false }
  ]
})

const allTheses = ref([
  { id: 1, title: '基于机器学习的自然语言处理研究', progress: 60 },
  { id: 2, title: '区块链在供应链管理中的应用研究', progress: 40 },
  { id: 3, title: '人工智能在医疗诊断中的应用', progress: 80 },
  { id: 4, title: '5G 技术在物联网中的应用研究', progress: 20 },
  { id: 5, title: '大数据分析在金融风险管理中的应用', progress: 50 }
])
</script>

<style scoped>
.thesis-progress-page {
  padding: 20px;
}

.el-main {
  color: #333;
  text-align: center;
  padding: 20px;
}
</style>